<template>
  <view class="container">
    <canvas canvas-id="fireworks" id="fireworks" class="canvas"></canvas>
  </view>
</template>




<script>
export default {
  onReady() {
    this.initFireworks();
  },
  methods: {
    initFireworks() {
      const ctx = uni.createCanvasContext('fireworks');
      const query = uni.createSelectorQuery().select('#fireworks');

      query.boundingClientRect((rect) => {
        const canvasWidth = rect.width;
        const canvasHeight = rect.height;

        const fireworks = [];
        const particles = [];

        function random(min, max) {
          return Math.random() * (max - min) + min;
        }

        function randomColor() {
          const r = Math.floor(random(0, 256));
          const g = Math.floor(random(0, 256));
          const b = Math.floor(random(0, 256));
          return `rgb(${r},${g},${b})`;
        }

        function createFirework(x) {
          const firework = {
            x: x,
            y: canvasHeight,
            targetY: random(0, canvasHeight * 0.3), // 控制烟花爆炸高度
            age: 0,
            lifespan: random(50, 100),
            radius: random(2, 4),
            color: randomColor()
          };
          fireworks.push(firework);
        }

        function createParticle(x, y, color) {
          const particle = {
            x: x,
            y: y,
            vx: random(-3, 3),
            vy: random(-3, 3),
            age: 0,
            lifespan: random(40, 80), // 延长烟丝的寿命
            radius: random(1, 2),
            color: color
          };
          particles.push(particle);
        }

        function update() {
          for (let i = fireworks.length - 1; i >= 0; i--) {
            const firework = fireworks[i];
            firework.age++;
            firework.y -= (canvasHeight - firework.targetY) / firework.lifespan;
            if (firework.age > firework.lifespan) {
              for (let j = 0; j < 100; j++) {
                createParticle(firework.x, firework.y, firework.color);
              }
              fireworks.splice(i, 1);
            }
          }

          for (let i = particles.length - 1; i >= 0; i--) {
            const particle = particles[i];
            particle.age++;
            particle.x += particle.vx;
            particle.y += particle.vy;
            if (particle.age > particle.lifespan) {
              particles.splice(i, 1);
            }
          }
        }

        function draw() {
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);

          for (const firework of fireworks) {
            ctx.beginPath();
            ctx.arc(firework.x, firework.y, firework.radius, 0, Math.PI * 2);
            ctx.setFillStyle(firework.color);
            ctx.fill();
          }

          for (const particle of particles) {
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
            ctx.setFillStyle(particle.color);
            ctx.fill();
          }

          ctx.draw();
        }

        function loop() {
          update();
          draw();
          setTimeout(loop, 16); // Roughly 60 frames per second
        }

        function startFireworks() {
          setInterval(() => {
            createFirework(random(0, canvasWidth)); // Fireworks will launch from the bottom of the screen
          }, 200); // Create a firework every 200 milliseconds
        }

        startFireworks();
        loop();
      }).exec();
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.canvas {
  width: 100%;
  height: 100%;
}
</style>

